جمع کردن (Collapse) منوی جانبی موقع لود فرم در پنل AdminLte
چگونه می توانیم تنظیمات پنل مدیریتی adminlte را تغییر دهیم به شکلی که در حین لود صفحه asidebar بصورت collapse نمایش داده شود تا بتوانیم از فضای صفحه استفاده نماییم. و با کلیک کاربر به صورت expand نمایش داده شود
پاسخ هوش مصنوعی
برای جمع کردن (collapse) منوی جانبی (sidebar) در هنگام بارگذاری صفحه در پنل AdminLTE، شما می توانید از کلاس های CSS و جاوا اسکریپت استفاده کنید. در اینجا یک راهنمایی برای انجام این کار آورده شده است:
ابتدا باید اطمینان حاصل کنید که منوی جانبی شما دارای کلاس `sidebar-collapse` است. برای این کار می توانید کد HTML زیر را به کار ببرید:
سپس شما نیاز به یک کد جاوا اسکریپت دارید تا منوی جانبی را در هنگام بارگذاری صفحه به صورت جمع شده (collapsed) نمایش دهد. کد زیر را در فایل جاوا اسکریپت خود اضافه کنید:
$(document).ready(function() {
$(".sidebar").addClass("sidebar-collapse");
});
با این کد، منوی جانبی به محض بارگذاری صفحه به صورت جمع شده نمایش داده می شود. برای باز کردن منو با کلیک کاربر، AdminLTE این قابلیت را به طور پیش فرض ارایه می دهد. کاربر می تواند با کلیک روی دکمه مربوطه منوی جانبی را گسترش دهد.
به یاد داشته باشید که اطمینان حاصل کنید کتابخانه jQuery و فایل های CSS و JS مربوط به AdminLTE به درستی در پروژه شما لینک شده باشد.
باید یک event تعریف نمایید که به محض لود شدن صفحه خاصیت های dispaly و right سایدبار را دستکار نماید
فقط کافیه کلاس " sidebar-collapse " رو به Body اضافه کنی. همین!
- آموزش استفاده از پلاگین گردونه شانس در Asp.net core به همراه سورس
- نمایش متن به صورت فرمت شده در CkEditor
- آموزش استفاده از SignalR در Asp.net Core با مثال عملی
- ادغام چند گزارش استیمول سافت بصورت پی دی اف در یک فایل
- نحوه تغییر استایل کامپوننت select2 چگونه است ؟
- چگونه امنیت پروژه را در Asp.net Core افزایش دهیم ؟
- ارسال پارامتر در دستور window.open جی کویری
- ارسال پارامتر از طریق جاوااسکریپت با کلیک روی تگ a
- خطای 500 زمان اجرا شدن پروژه روی هاست
- کویری نویسی در استیمول سافت جهت فیلتر اطلاعات
- کار با CkEditor با قابلیت آپلود عکس
- حذف فایلها و دستورات Css و JavaScript اضافی
- تبدیل اعداد انگلیسی به فارسی در سایت
- دلیل خطای Identifier 'X' has already been declared در جی کویری چیست ؟
- جدا کردن سه رقم سه رقم اعداد در input با جاوااسکریپت
- محدود کردن تایپ عدد یا حروف با جاوا اسکریپت
- مقایسه بین فریم ورک های Angular و React.js و Vue js
- نمایش پیغام گرافیکی با جی کویری
- تفاوت Class Component و Functional Component در React.js چیست ؟
- پراپس (Props) در React.js چیست ؟